<template>
  <div class="container">
    <el-card style="position: relative">
      <RouterHeader :title="title()"></RouterHeader>
      <el-form
        :model="form"
        :rules="rules"
        ref="ruleFormRef"
        label-width="140px"
        size="mini"
        label-position="right"
        validate-on-rule-change
      >
        <el-row :gutter="20" class="form-single-info">
          <el-col :span="20">
            <div class="title"><h5>基本信息</h5></div>
            <el-row>
              <el-col :span="12">
                <el-form-item label="所属项目" prop="projectName">
                  <el-input
                    class="input-item"
                    v-model="form.projectName"
                    placeholder="请输入"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="任务名称" prop="enterpriseName">
                  <el-input
                    class="input-item"
                    v-model="form.enterpriseName"
                    placeholder="请输入"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="任务说明" prop="enterprisePhone">
                  <el-input
                    class="input-item"
                    v-model="form.enterprisePhone"
                    placeholder="请输入"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="任务执行人" prop="enterprisePerson">
                  <!-- {{ form.enterprisePerson }} -->
                  <el-input
                    class="input-item"
                    v-model="form.enterprisePerson"
                    placeholder="请输入"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="实际开始日期" prop="expectedDealDate">
                  <el-date-picker
                    v-model="form.expectedDealDate"
                    type="date"
                    placeholder="选择日期"
                    style="width: 100%"
                    disabled
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备注" prop="expectedDealDate">
                  <el-input
                    class="input-yijian"
                    type="textarea"
                    :autosize="{ minRows: 2 }"
                    maxlength="150"
                    show-word-limit
                    v-model="form.opinion"
                    placeholder="请输入内容"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="添加附件/图片" prop="projectFileList">
                  <fileupload
                    @update:modelValue="handleModelValueFile"
                    :limit="5"
                  ></fileupload>
                </el-form-item>
              </el-col>
            </el-row>
            <div class="title"><h5>成果交付</h5></div>
            <el-row>
              <el-col :span="12">
                <el-form-item label="任务反馈成果" prop="projectName">
                  <el-input
                    class="input-item"
                    v-model="form.projectName"
                    placeholder="请输入"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="实际结束日期" prop="expectedDealDate">
                  <el-date-picker
                    v-model="form.expectedDealDate"
                    type="date"
                    placeholder="选择日期"
                    style="width: 100%"
                    disabled
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="附件/图片" prop="enterprisePhone">
                  <fileupload
                    @update:modelValue="handleModelValueFile"
                    :limit="5"
                  ></fileupload>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="审批人" prop="enterprisePerson">
                  <el-input
                    class="input-item"
                    v-model="form.enterprisePerson"
                    placeholder="请输入"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="抄送人" prop="projectFileList">
                  <el-input
                    class="input-item"
                    v-model="form.enterprisePerson"
                    placeholder="请输入"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <div class="title">
              <h5>审批意见</h5>
            </div>
            <div class="yijian">
              <el-input
                class="input-yijian"
                type="textarea"
                :autosize="{ minRows: 2 }"
                maxlength="150"
                show-word-limit
                v-model="form.opinion"
                placeholder="请输入内容"
              ></el-input>
            </div>
            <el-col :span="24">
              <el-form-item label="审批决定" prop="tenderProject">
                <el-radio-group v-model="form.tenderProject">
                  <el-radio :label="0">完成审批</el-radio>
                  <el-radio :label="1">继续审批</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>
<script setup>
import RouterHeader from "@/components/RouterHeader";
import { useRoute } from "vue-router";
import { ref, reactive } from "vue";
const route = useRoute();
const title = () => {
  if (route.query.name === "2") {
    return "审批编辑";
  } else {
    return "审批详情";
  }
};
const form = reactive({
  projectName: "",
  enterpriseName: "",
  enterprisePhone: "",
  enterprisePerson: "",
  expectedDealDate: "",
  projectFileList: [],
});
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  padding: 20px;
  .top-content {
    width: 100%;
    height: 50px;
    border-bottom: 3px solid #409eff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .editTitle {
      font-weight: 600;
    }
    .button_ok {
      margin-right: 20px;
    }
    .button-content {
      position: absolute;
      background: #0092ff;
      transform: rotate(45deg);
      height: 50px;
      width: 50px;
      right: -25px;
      top: -25px;
      text-align: center;
      .button_back {
        transform: rotate(-45deg);
        color: white;
        margin-top: 20px;
      }
    }
  }
  .el-form {
    padding: 20px;
    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      h5 {
        font-weight: bold;
      }
    }

    .table-content {
      width: 100%;
      margin-left: 70px;
      overflow-y: auto;
    }
    .yijian {
      margin-left: 70px;
    }
    .fabu {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
    }
    .text-content {
      height: 250px;
      margin-left: 70px;
      background: #f8f8f9;
      margin-top: 20px;
      overflow: auto;
      padding: 20px;
      .custom-concent {
        width: 100%;
        height: 70px;
        display: flex;
        margin-top: 8px;
        .custom-text {
          display: flex;
          width: 100%;
          margin-left: 10px;
          .text-top {
            display: flex;
            flex-direction: column;
            .text-time {
              color: #939393;
              font-size: 16px;
              margin-top: 10px;
            }
          }
          .text-bottom {
            display: flex;
            justify-content: space-between;
          }
        }
        .custom-avatar {
          width: 50px;
          height: 50px;
          border-radius: 10px;
        }
        .custom-reply {
          color: #333;
          font-size: 16px;
          margin-left: 10px;
        }
      }
    }
  }
}
.form-single-info {
  display: flex;
  justify-content: center;
}
</style>
